<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- 问题：什么样的数据需要循环1.数组，1.对象 
			语法：v-for。遍历展现的是标签<h1
			-->
			<h2>循环遍历结构</h2>
			<!-- item 代表的是元素 in 表示从哪里获取 在标签里可以直接输出 -->
			<!-- 第一种写法 -->
			<p v-for="item in hobby">{{item}}</p>
			<!-- 第二种写法 -->
			<h5>第二个写法的数据</h5>
			<p v-for=" item in hobby" v-text="item"></p>

			<hr>
			<h3>遍历对象结构</h3>
			<!-- 1.如果我们直接遍历对象，则直接展现value的值 第一种方式 -->
			<h5 v-for="item in user" v-text="item"> </h5>
			<hr>
			<!--遍历对象 第二种方式 -->
			<h6 v-for=" (value,key) in user">
				<p>{{key}}....{{value}}</p>
			</h6>
			<hr>
			<!-- 遍历对象。第三种方式 -->
			<h6 v-for=" (value,key,index) in user">
				<p>{{key}}....{{value}}...下标：{{index}}</p>
			</h6>
			<hr>
			<!-- 遍历对象。第三种方式 -->
			<h6 v-for=" (value,key,index) in user">
				<p>{{value}}</p>
			</h6>
			<hr>
			<!-- 遍历数组里面是对象    约定：key用来区分遍历的节点信息-->
			<h5 v-for="user in userList" :key="user.id" >
				<p>Id编号：{{user.id}}...名字：{{user.name}}...年龄：{{user.age}}</p>
			
			</h5>

		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<script>
			const app = new Vue({
				el: '#app',
				data: {
					hobby: ['电脑', '手机', '平板', '对象'],
					user: {
						id: 100,
						name: 'tom',
						age: 18
					},
					userList: [{
							id: 100,
							name: 'tom',
							age: 15
						},
						{
							id: 1,
							name: 'jire',
							age: 150
						}
					
				        ]

			},
			methods: {


			}



			})
		</script>
	</body>
</html>
